<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锤子商城 - 坚果手机、坚果 R2 手机、Smartisan TNT go 扩展本 </title>
</head>
<link rel="stylesheet" href="./css/gouwuche.css">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/shop.css">
<body>
    <div class="ctn">
        <!-- 导航条 -->
        <nav class="navbar-inverse">
            <!-- 锤子logo -->
            <div class="logo"><img src="./images/logo.png" alt=""></div>
            <!-- 导航选项 -->
            <div class="navbar-container">
                <ul class="navbar-words">
                    <li><a href="shop.html">在线商城</a></li>
                    <li><a href="./r2.html">坚果R2</a></li>
                    <li><a href="./smartisan.html">Smartisan TNT go</a></li>
                    <li><a href="./gongzuozhan.html">坚果TNT工作站</a></li>
                    <li><a href="javascript:void(0);">Smartisan OS</a></li>
                    <li><a href="javascript:void(0);">欢喜云</a></li>
                    <li><a href="javascript:void(0);">论坛</a> </li>
                    <li><a href="javascript:void(0);">开发者支持</a></li>
                    <li><a href="javascript:void(0);">荣誉与奖项</a></li>
                </ul>
            </div>
            <!-- 登录，购物车 -->
            <div class="login"><a href="./login.html"></a></div>
            <div class="shopcart"><a href="./fuqian.html" target="_blank"></a></div>
        </nav>
        <!-- title,搜索框 -->
        <div class="main-title">
            <div class="title-container">
                <ul class="title-item">
                    <li class="pull-down">
                        <a href="#">首页</a>
                        <!-- 下拉选项框 -->
                        <div>
                            <div id="pull-downcontainer">
                                <ul>
                                    <li>手机</li>
                                    <li><img src="./images/shouji01.webp" alt=""><span>手机</span></li>
                                </ul>
                                <ul>
                                    <li>官方配件</li>
                                    <li><img src="./images/shouji02.webp" alt=""><span>蓝牙耳机</span></li>
                                    <li><img src="./images/shouji03.webp" alt=""><span>数据线</span></li>
                                    <li><img src="./images/shouji04.webp" alt=""><span>充电器</span></li>
                                    <li><img src="./images/shouji05.webp" alt=""><span>移动电源</span></li>
                                    <li><img src="./images/shouji06.webp" alt=""><span>拍照配件</span></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="pull-down">
                        <a href="./categoryr2.html">坚果手机</a>
                        <!-- 下拉选项框 -->
                        <div></div>
                    </li>
                    <li class="pull-down">
                        <a href="./categoryr3.html">TNT</a>
                        <!-- 下拉选项框 -->
                        <div></div>
                    </li>
                    <li class="pull-down">
                        <a href="./categoryr4.html">官方自营</a>
                        <!-- 下拉选项框 -->
                        <div></div>
                    </li>
                    <li class="pull-down" id="last-one">
                        <a href="#">服务</a>
                        <!-- 下拉选项框 -->
                        <div>
                            <ul class="pull-service">
                                <li><img src="./images/fuwu01.png" alt=""><span>保修服务</span></li>
                                <li><img src="./images/fuwu02.png" alt=""><span>在线客服</span></li>
                                <li><img src="./images/fuwu03.png" alt=""><span>服务政策</span></li>
                                <li><img src="./images/fuwu04.png" alt=""><span>发起售后</span></li>
                                <li><img src="./images/fuwu05.png" alt=""><span>维修门店</span></li>
                                <li><img src="./images/fuwu06.png" alt=""><span>自助服务</span></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <!-- 搜索框 -->
                <div class="search-input">
                    <div><img src="./images/magnifier.png" alt=""></div>
                    <input type="text">
                    <a href="./gouwuche.html" class="R2">坚果 R2</a>
                    <a href="./gouwuche2.html" class="TNT">TNT</a>
                </div>
                <div class='searchactive'>
                    <a href="./login.html"><img src="./images/login01.png"></a>
                    <a href=""><img src="./images/shopcart01.png"></a>
                </div>
            </div>
        </div>
        </div>
    <div class="box-shadow">
        <div class="box1">
        <div class="item-wrapper">
            <li id="tu1"><img src="./images/img511.webp" alt=""></li>
            <li id="tu2"><img src="./images/img512.webp" alt=""></li>
            <li id="tu3"><img src="./images/img513.webp" alt=""></li>
            <li id="tu4"><img src="./images/img514.webp" alt=""></li>
            <li id="tu5"><img src="./images/img515.webp" alt=""></li>
            </div>
            <li class ="gallery-wrapper">
               <img src="./images/img516.webp" alt="" id="tu">
            </li>
                </div>
                <div class="box2">
                    <article class="item1">
                        <div class="item1-2">
                    <h1>Smartisan 真无线蓝牙耳机（抖音文创限量款）</nbsp></h1>
                    <h2>抖音文创限量版</h2>
                    </div>
                    <div class="item1-1">
                        <i>￥</i>
                        <span>299.00</span>
                    </div>
                    </article>
                    <section class="item2">
                        <span>颜色选择</span>
                        <ul>
                            <li>
                                <aside>
                                    <h1>黑色</h1>
                                </aside>
                            </li>
                        </ul>
                    </section>
                    <section class="item3">
                        <span>数量选择</span>
                        <div>
                        <span id="subtrack">-</span>
                        <div class="wapper">1</div>
                        <span id="add">+</span>
                        </div>
                    </section>
                    <section class="item4">
                        <div>
                        <span>服务说明</span>
                        <p>满99元包邮</p>
                            </div>
                    </section>
                </div>
            </div>
            <!-- 介绍 -->
            <section class="item5">
                <article>
                    <h2>产品信息</h2>
                </article>
                <div>
                <img src="./images/img5111.webp" alt="">
                <img src="./images/img5112.webp" alt="">
                <img src="./images/img5113.webp" alt="">
                <img src="./images/img5114.webp" alt="">
                <img src="./images/img5115.webp" alt="">
                <img src="./images/img5116.webp" alt="">
                <img src="./images/img5117.webp" alt="">
                <img src="./images/img5118.webp" alt="">
                <img src="./images/img5119.webp" alt="">
                <img src="./images/img5120.webp" alt="">
                <img src="./images/img5121.webp" alt="">
                </div>
            </section>
            <!-- 购物车付款 -->
            <div class="box3">
                <div class="ab">
                    <div class="a">
               <h1>您已选择了</h1>
               <div class="inp">
               <span>Smartisan 真无线蓝牙耳机（抖音文创限量款）</span>
                <h2>黑色</h2>
                </div>
                </div>
                <div class="abc">
                <div class="item6">
                    <i>￥</i>
                    <span class="yuan">299.00</span>
                </div>
                <div class="item7">
                <a href="">到货通知</a>
                </div>
                </div>
                </div>
            </div>
            <div class="footer">
                <div>
                    <div class="footer-menu">
                        <ul>
                            <li>
                                <h3>订单服务<h3>
                                        <div>
                                            <a href="">购买指南</a>
                                            <a href="">送货政策</a>
                                        </div>
                            </li>
                            <li>
                                <h3>服务支持<h3>
                                        <div>
                                            <a href="">自主服务</a>
                                            <a href="">维修门店</a>
                                        </div>
                            </li>
                            <li>
                                <h3>媒体中心<h3>
                                        <div>
                                            <a href="">新闻动态</a>
                                            <a href="">官方视频</a>
                                            <a href="">图片资源</a>
                                        </div>
                            </li>
                            <li>
                                <h3>关注我们<h3>
                                        <div>
                                            <a href="">新浪微博</a>
                                            <a href="">官方微信</a>
                                            <a href="">荣誉奖项</a>
                                        </div>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-info">
                        <ul>
                            <li>Copyright © 2020 smartisan.com 版权所有</li>
                            <li><a href="">锤子商城隐私政策</a></li>
                            <li><a href="">锤子商城用户协议</a></li>
                            <li><a href="">资质证照</a></li>
                        </ul>
                        <ul>
                            <li><a href="">京 ICP 备 19048576 号 - 1</a></li>
                            <li><a href="">京公网安备 11010802033469号</a></li>
                            <li><a href="">京食药网食备 202010031</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <aside class="bar">
            <figure class="cus">
                <span></span>
                <figcaption>联系客服</figcaption>
            </figure>
            <figure class="cus2">
                <span></span>
                <figcaption>回到顶部</figcaption>
            </figure>
        </aside>
<script src="./js/gouwuche.js"></script>
</body>
</html>
<script>
// var abc = document.getElementById("tu");
// console.log(abc);
// var qiehuan = document.querySelector("#tu1");
// console.log(qiehuan);
// var qiehuan2 = document.querySelector("#tu2");
// qiehuan.onclick=function(){
// abc.src="../img/img10.webp";
// };
// qiehuan2.onclick=function(){
//     abc.src="../img/img3.webp";
// }
</script>